<template>
  <el-main>
    <div class="newsContainer">
      <el-image src="http://file.chat.navrise.com/file/demo/59f9974f8d4e5e2ca78da92f0f92114.png" fit="cover" style="height: 33.33rem"></el-image>
      <div class="newsContent">
        <div v-for="(item,index) in data" class="everyBlock" @click="toDetails(item)">
          <el-image :src="item.img"></el-image>
          <div class="thisContent">
            <h3>{{item.title}}</h3>
            <p class="textP">{{item.content}}</p>
            <div class="thisTime">
              <el-image :src="iconUrl"></el-image>
              <p class="timeP">{{item.time}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="block" style="margin-top: 20px;">
      <el-pagination layout="prev, pager, next" :total="pageTotal" :page-size="pageRows" :current-page.sync="page"
        @current-change="updatePage">
      </el-pagination>
    </div>

    <foot-view></foot-view>
  </el-main>
</template>

<script>
  import httpTool from '@/http.js'


  // import newsBannerUrl from '@/assets/img/news/newsBanner.png'
  import imageUrl1 from '@/assets/img/news/1.png'
  import imageUrl2 from '@/assets/img/news/2.png'
  import imageUrl3 from '@/assets/img/news/3.png'
  import imageUrl4 from '@/assets/img/news/4.png'
  import imageUrl5 from '@/assets/img/news/5.png'
  import imageUrl6 from '@/assets/img/news/6.png'
  import iconUrl from '@/assets/img/news/time.png'



  export default {
    name: "News",


    data() {
      return {
        page: 0,
        pageRows: 8,
        pageTotal: 0,

        // newsBannerUrl:newsBannerUrl,
        iconUrl: iconUrl,
        data: []
      }
    },



    created() {



    },


    mounted() {


      this.updatePage();
    },





    methods: {

      pageChange() {

        console.log("pageChange");

      },

      updatePage() {
        var self = this;
        self.data = [];
        httpTool.send("/news_lt?json&page=" + self.page + "&rows=" + self.pageRows, null, function(data) {
          self.pageTotal = data.total;
          self.data = data.rows;
        })
      },

      // 点击跳转详情页
      toDetails(data) {

        if (data.page) {

          this.$router.push({
            path: '/News/details',
            query: {
              id: data.id
            }
          })

        } else if (data.link && data.link.length > 0) {
          window.open(data.link);
        } else {
          window.open("about:blank");
        }
      }
    },
  }
</script>

<style scoped lang="scss">
  .el-main {
    width: 100%;
    background-color: #f4f4f4;
    padding: 0;
    min-width: 120rem;

    .newsContainer {
      width: 100rem;
      background-color: #ffffff;
      margin: 2rem auto 0;

      .newsContent {
        width: 90.33rem;
        margin: 0 auto;
        padding: 4.6rem 0 5.87rem;
        box-sizing: border-box;

        h3,
        p {
          margin: 0;
        }

        .everyBlock {
          width: 100%;
          height: 16.66rem;
          margin-bottom: 2.5rem;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          border-bottom: 1px solid #d7d7d7;
          cursor: pointer;

          .el-image {
            width: 25rem;
            height: 16.66rem;
          }

          .thisContent {
            width: 61.33rem;
            height: 100%;
            margin-left: 3.33rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;

            h3 {
              /*font-family: 'fontMedium';*/
              font-weight: 500;
              font-size: 1.66rem;
              margin: 1rem 0 1.25rem;
              color: #333333;
            }

            p {
              font-size: 1.166rem;
              font-weight: 400;
              line-height: 2rem;
              color: #999999;
              text-align: left;
            }

            .textP {
              height: 5.166rem;
              margin-bottom: 2.7rem;
            }

            .thisTime {
              display: flex;
              justify-content: flex-start;
              align-items: center;

              .el-image {
                width: 1.3rem;
                height: 1.3rem;
              }

              .timeP {
                margin-left: .5rem;
              }
            }
          }
        }

        .everyBlock:active {
          background-color: #F5F5F5;
        }
      }
    }
  }
</style>
